<template>
  <ul class="text-jump" :class="{ active }" v-bind="$attrs">
    <li v-for="(item, index) in textList" :key="index" :class="{ active: index < 3 }">
      <span :style="item.css">{{ item.text }}</span>
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import type { PropType } from 'vue'
import { prefixStyle } from '@/utils'

const Transition = prefixStyle('transition') as any
export default defineComponent({
  name: 'textJump',
  props: {
    value: {
      type: String as PropType<string>,
      required: true,
      default: ''
    }
  },
  setup(props) {
    const active = ref<boolean>(false)
    const textList = computed(() => {
      return props.value.split('').map((item, index) => {
        const obj: any = {}
        obj[Transition] = `all 1.5s ${index * 0.1}s cubic-bezier(0.165, 0.84, 0.44, 1)`
        return {
          css: obj,
          text: item
        }
      })
    })

    onMounted(() => {
      setTimeout(() => {
        active.value = true
      })
    })

    return {
      active,
      textList
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.text-jump {
  display: inline-flex;

  &.active > li > span {
    transform: translateY(0);
  }

  > li {
    width: 62px;
    height: 82px;
    overflow: hidden;

    &.active {
      color: #1f86ff;
    }

    > span {
      display: inline-block;
      transform: translateY(100%);
    }
  }
}
</style>
